/*!
 * Creative App Preview.
 * Date: 2015/12/31.
 * Copyright© 2014-2015 Vamaker All Rights Reserved.
 */
require([
  'jquery',
	'pageInit',
  'materialPreview',
  'flowplayer'
], function ($, vamakerPage, MaterialPreview, flowplayer) {
$(function() {
  var $videoPreviewDetails = $('#video-preview-details'),
    $detailsSyncTableList = $('.details-sync-content .table'),
    $syncListTbody = $('.details-sync-content table > tbody'),
    crId = $('.creative-id').val(),
    crType = $('.creative-type').val(),
    crUrl = $('.creative-url').val(),
    mimeType, _videoHtml,
    flowplayerConfig,
    videoPreviewRender, syncListRender, syncRowRender, getUrlPostfix;
    // Flowplayer config.
    flowplayerConfig = {
      swf: VAM.getVar('VIDEO_PLUGIN_URL'),
      muted: false,
      preload: 'metadata',
      tooltip: false,
      volume: 0.3
    };
    // 获取素材URL地址文件后缀名
    getUrlPostfix = function(url) {
      var mediaType, dotOffset;
      url = url.toLowerCase();
      dotOffset = url.lastIndexOf('.');
      mediaType = url.substr(dotOffset+1);
      return mediaType;
    };
    // 视频预览渲染
    videoPreviewRender = function(crType, crUrl) {
      var _videoHtml, _materialArr = [],  _materialStr = '';
      _materialArr = crUrl.split(',');
      if (crType === 'png' || crType === 'jpg') {
        for (var i = 0, len = _materialArr.length; i < len; i++) {
          _materialStr += '<img src="' + $.trim(_materialArr[i]) + '" />'
        }
        mimeType = 'image/jpeg';
        _videoHtml = '<div class="pic"><div class="pic_wrap">'
                   + _materialStr
                   + '</div></div>';
      } else if (crType === 'dynamic-pic' || crType === 'gif') {
        mimeType = 'image/gif';
        _videoHtml = '<div class="pic"><div class="pic_wrap">'
                   + '<img src="' + crUrl + '" />'
                   + '</div></div>';
      } else if (crType === 'flv') {
        mimeType = 'video/flv';
        _videoHtml = '<div class="flowplayer">'
                   + '<video >'
                   + '<source src="' + crUrl + '" type="' + mimeType + '" />'
                   + '</video></div>';
      } else if (crType === 'swf') {
        mimeType = 'application/x-shockwave-flash';
        _videoHtml = '<div>'
                   + '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="300" height="260">'
                   + '<param name="movie" value="' + crUrl + '" >'
                   + '<param name="wmode" value="transparent" >'
                   + '<param name="quality" value="high" >'
                   + '<param name="bgcolor" value="#FFFFFF" >'
                   + '<param name="allowFullScreen" value="true" >'
                   + '<param name="autoStart" value="-1">'
                   + '<param name="Play" value="false">'
                   + '<param name="Loop" value="false">'
                   + '<param name="controls" value="true" >'
                   + '<embed src="' + crUrl + '" quality="high" autoplay="false" loop="false" play="false" controller="true" bgcolor="#FFFFFF" width="300" height="260" wmode="transparent" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
                   + '</object>'
                   + '</div>';
      } else if (crType === 'mp4') {
        _format = 'MP4';
        mimeType = 'video/mp4';
        _videoHtml = '<div class="flowplayer">'
               + '<video>'
               + '<source src="' + crUrl + '" type="' + mimeType + '" />'
               + '</video></div>';
      } else if (crType === 'ogg' || crType === 'ogv') {
        _format = 'OGG';
        mimeType = 'video/ogg';
        _videoHtml = '<div class="flowplayer">'
               + '<video>'
               + '<source src="' + crUrl + '" type="' + mimeType + '" />'
               + '</video></div>';
      };
      return _videoHtml;
    };
    
    $videoPreviewDetails.html(videoPreviewRender(crType, crUrl));
    $videoPreviewDetails.find('.flowplayer').flowplayer(flowplayerConfig);
    // 组成列表行数据
    syncRowRender = function(syncRow) {
      var _id = syncRow.id,
        _materialType = syncRow.type,
        _materialFormat = syncRow.format,
        _materialUrl = syncRow.url,
        _previewBtn = '<button class="btn btn-info btn-xs material-preview" title="' + VAM.j('Preview') + '" data-type="' + _materialFormat + '" data-url="' + _materialUrl + '" data-id="' + _id + '"><i class="fa fa-eye"></i></button>',
        rowInfo;
            //console.log(_materialType);
      if (syncRow.format === 'static-pic') {
        _materialFormat = VAM.j('Static Pic');
      } else if (syncRow.format === 'dynamic-pic') {
        _materialFormat = VAM.j('Dynamic Pic');
      } else if (syncRow.format === 'swf') {
        _materialFormat = 'SWF';
      } else if (syncRow.format === 'txt') {
        _materialFormat = 'TXT';
      };

      if (syncRow.type === 'video') {
        _materialType = VAM.j('video');
      };

      rowInfo = '<tr>'
              + '<td title="' + _materialType + '">' + _materialType + '</td>'
              + '<td title="' + _materialFormat + '">' + _materialFormat + '</td>'
              + '<td title="' + _materialUrl + '">' + _materialUrl + '</td>'
              + '<td >' + _previewBtn + '</td>'
              + '</tr>';
      return rowInfo;
    };
    // 同步列表渲染
    syncListRender = function(data) {
      var syncListRow, _syncRow;
      if (typeof data === 'string') {
        data = $.parseJSON(data);
      };
      // 清空列表数据
      $syncListTbody.children().remove();
      // 组成列表数据
      for (var i = 0, len = data.list.length; i < len; i++) {
        syncListRow = data.list[i];
        //console.log(data.list[i]);
        _syncRow = syncRowRender(syncListRow);
        $syncListTbody.append(_syncRow);
      };
    };
    $.ajax({
      url: VAM.getVar('DATA_CPE_MATERIALS_URL'),
      type: 'POST',
      data: {
        guid: crId
      }
    })
    .done(function(data) {
      syncListRender(data);
    })
    .fail(function() {
      console.log('error!');
    })
    .always(function() {});

    //素材预览
    $detailsSyncTableList.on('click', '.material-preview', function(evt) {
      var $me = $(this),
      $parentTr = $me.parents('tr'),
      currType = $me.data('type'),
      currSyncUrl = $me.data('url'),
      _videoText  = videoPreviewRender(currType, currSyncUrl);
      evt.preventDefault();
      $syncListTbody.find('tr').removeClass('info');
      $parentTr.addClass('info');
      $videoPreviewDetails.html('');
      $videoPreviewDetails.html(_videoText);
      $videoPreviewDetails.find('.flowplayer').flowplayer(flowplayerConfig);
    });
});

});
